GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>CSS-Sprites</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">CSS-Sprites</span></h1>

</header>

</div>

<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p><b>CSS-Sprites</b> bezeichnet eine einzelne <a href="Computergrafik" title="Computergrafik">Grafikdatei</a>, die mehrere Symbole und <a href="Icon_(Computer)" title="Icon (Computer)">Icons</a> enthält. Diese zusammengefassten Grafiken fungieren als <a href="Sprite_(Computergrafik)" title="Sprite (Computergrafik)">Sprites</a> und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a>-Eigenschaft <code>background-image</code> und <code>background-position</code> ein- beziehungsweise ausgeblendet.

</p><p>Dokumentiert wurde diese Technik vermutlich das erste Mal 2004 im englischsprachigen Online-Magazin A List Apart, eine Website, die sich an Webdesigner richtet.<sup id="cite_ref-alistapart_1-0" class="reference"><a href="#cite_note-alistapart-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-smashing_mag_2-0" class="reference"><a href="#cite_note-smashing_mag-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Bekannte Websites wie <a href="Google" title="Google">Google</a>, <a href="XING" class="mw-redirect" title="XING">XING</a>, <a href="Amazon" title="Amazon">Amazon</a> oder <a href="Facebook" title="Facebook">Facebook</a> nutzen diese Technik.<sup id="cite_ref-webkrauts_3-0" class="reference"><a href="#cite_note-webkrauts-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-smashing_mag_2-1" class="reference"><a href="#cite_note-smashing_mag-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Eine Alternative zu Sprites sind <a href="Webtypografie#Icon-Fonts" title="Webtypografie">Icon-Fonts</a>.

</p>

<div class="mw-heading mw-heading2"><h2 id="Vorteile">Vorteile</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Verbesserung_der_Ladezeit">Verbesserung der Ladezeit</h3></div>

<p>In den meisten Fällen kann durch eine konsequente Nutzung von Sprites eine Verringerung der Webseiten-Ladezeit erreicht werden: Der <a href="Webbrowser" title="Webbrowser">Webbrowser</a> lädt wesentlich schneller eine Datei mit einer Größe von 10 kB als zehn Dateien mit jeweils 1 kB, weil die <a href="HTTP" class="mw-redirect" title="HTTP">HTTP</a>-Spezifikation nur wenige <i>parallele</i> Download-Vorgänge vorsieht.

</p>

<div class="mw-heading mw-heading3"><h3 id="Vermeiden_von_Verzögerung_bei_Bildwechseln"><span id="Vermeiden_von_Verz.C3.B6gerung_bei_Bildwechseln"></span>Vermeiden von Verzögerung bei Bildwechseln</h3></div>

<p>Das dynamische Wechseln eines Bildes auf einer Internetseite ist im Rahmen des <a href="Webdesign" title="Webdesign">Webdesigns</a> nicht unüblich – so wird eine Grafik beispielsweise gewechselt, sobald der Mauszeiger über ein bestimmtes Element fährt. Das Laden der einzuwechselnden Grafik erfordert ohne weitere Vorkehrungen jedoch immer eine gewisse Ladezeit – selbst bei schnellen Internetverbindungen nimmt der Benutzer eine kurze Verzögerung oder ein kurzes Flackern wahr. Bei der Sprite-Technik dagegen ist das zweite Bild bereits Teil der bereits geladenen Gesamtgrafik, die nur noch relativ zum sichtbaren Bereich verschoben werden muss. Ein Flackern nimmt der Betrachter nicht mehr wahr, da das Bild zuvor bereits vom Browser <a href="Cache" title="Cache">zwischengespeichert</a> wurde und kein erneuter <a href="Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a>-Aufruf notwendig ist.

</p>

<div class="mw-heading mw-heading3"><h3 id="Weitere_Vorteile">Weitere Vorteile</h3></div>

<p>Mit der Sprite-Technik können auch sogenannte <i>Image-Maps</i> ersetzt werden. Hierbei handelt es sich um ein <a href="HTML" class="mw-redirect" title="HTML">HTML</a>-Element, das kontextsensitiv wirkt, also etwa bestimmte Bereiche anklickbar macht.<sup id="cite_ref-oms_4-0" class="reference"><a href="#cite_note-oms-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> Außerdem ist es möglich, unter Zuhilfenahme von <a href="Cascading_Style_Sheets#CSS3" title="Cascading Style Sheets">CSS3</a> eine Grafik animiert darzustellen – ohne eine dafür sonst übliche <a href="Graphics_Interchange_Format" title="Graphics Interchange Format">GIF</a>-Datei einzusetzen.<sup id="cite_ref-medium_5-0" class="reference"><a href="#cite_note-medium-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Nachteile">Nachteile</h2></div>

<p>Das Erstellen der CSS-Sprites ist recht aufwendig und der Aufwand steigt proportional mit der Anzahl der zu verwendenden Einzelgrafiken. Neben der Zusammenstellung mit Hilfe eines <a href="Grafiksoftware" title="Grafiksoftware">Bildbearbeitungsprogrammes</a> muss der Entwickler auch in der Stylesheet-Datei für jedes Element die Hintergrundgrafik sowie die genaue Position innerhalb der Gesamtgrafik angeben. Für die Zusammenstellung der Sprite-Dateien sowie die Erzeugung des Stylesheet-Codes existieren jedoch verschiedene Softwarelösungen, die das Erstellen der Sprites automatisieren.<sup id="cite_ref-csstricks_6-0" class="reference"><a href="#cite_note-csstricks-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>

</p><p>Sprites können sich auch negativ auf die Ladezeit der Webseite auswirken – beispielsweise, wenn die Webseite nur sehr wenige Grafiken anzeigen muss, dafür aber die gesamte Spritedatei geladen wird, die um ein Vielfaches größer ist.

</p>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://css-tricks.com/css-sprites/">CSS-Tricks.com</a> Detaillierte Einführung in CSS-Sprites</li>

<li>Webseiten, die bei der Sprite-Erstellung unterstützen

<ul><li><a rel="nofollow" class="external text" href="https://www.toptal.com/developers/css/sprite-generator">CSS Sprites Generator</a> mit grundlegender Funktionalität</li>

<li><a rel="nofollow" class="external text" href="https://responsive-css.spritegen.com/">CSSsprites responsive</a> für Sprites, deren Einzelbilder (Bestandteile) Größenveränderungen zulassen</li>

<li><a rel="nofollow" class="external text" href="https://spritegen.website-performance.org/">Dan’s Tools CSS Sprite Generator</a> mit weiterführenden Funktionen (z. B. Unterstützung von <a href="Less_(Stylesheet-Sprache)" title="Less (Stylesheet-Sprache)">Less</a>)</li>

<li><a rel="nofollow" class="external text" href="https://instantsprite.com/">Instant Sprite</a> mit sehr einfacher Bedienung und rudimentärer Funktionalität</li>

<li><a rel="nofollow" class="external text" href="http://www.spritecow.com/">Sprite Cow</a> mit vielen Erklärungen und einer Benutzerführung geeignet auch für Anfänger</li></ul></li>

<li>Beispiele für CSS-Sprites:

<ul><li><a rel="nofollow" class="external text" href="https://www.google.de/images/nav_logo3.png">Google</a></li>

<li><a rel="nofollow" class="external text" href="http://l.yimg.com/d/lib/eu/fp/img/blue16.gif">Yahoo!</a></li></ul></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-alistapart-1"><span class="mw-cite-backlink"><a href="#cite_ref-alistapart_1-0">↑</a></span> <span class="reference-text"><span class="cite">Dave Shea: <a rel="nofollow" class="external text" href="https://alistapart.com/article/sprites/"><i>CSS Sprites: Image Slicing’s Kiss of Death.</i></a> In: <i>alistapart.com.</i> 5. März 2004,<span class="Abrufdatum"> abgerufen am 15. September 2011</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACSS-Sprites&rft.title=CSS+Sprites%3A+Image+Slicing%E2%80%99s+Kiss+of+Death&rft.description=CSS+Sprites%3A+Image+Slicing%E2%80%99s+Kiss+of+Death&rft.identifier=https%3A%2F%2Falistapart.com%2Farticle%2Fsprites%2F&rft.creator=Dave+Shea&rft.date=2004-03-05&rft.language=en"> </span></span>

</li>

<li id="cite_note-smashing_mag-2"><span class="mw-cite-backlink">↑ <sup><a href="#cite_ref-smashing_mag_2-0">a</a></sup> <sup><a href="#cite_ref-smashing_mag_2-1">b</a></sup></span> <span class="reference-text"><span class="cite">Sven Lennartz: <a rel="nofollow" class="external text" href="https://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/"><i>The Mystery Of CSS Sprites: Techniques, Tools And Tutorials.</i></a> In: <i>smashingmagazine.com.</i> 28. April 2009,<span class="Abrufdatum"> abgerufen am 15. September 2011</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACSS-Sprites&rft.title=The+Mystery+Of+CSS+Sprites%3A+Techniques%2C+Tools+And+Tutorials&rft.description=The+Mystery+Of+CSS+Sprites%3A+Techniques%2C+Tools+And+Tutorials&rft.identifier=https%3A%2F%2Fwww.smashingmagazine.com%2F2009%2F04%2Fthe-mystery-of-css-sprites-techniques-tools-and-tutorials%2F&rft.creator=Sven+Lennartz&rft.date=2009-04-28&rft.language=en"> </span></span>

</li>

<li id="cite_note-webkrauts-3"><span class="mw-cite-backlink"><a href="#cite_ref-webkrauts_3-0">↑</a></span> <span class="reference-text"><span class="cite">Tobias Otte: <a rel="nofollow" class="external text" href="http://www.webkrauts.de/2009/12/15/kuerzere-ladezeiten-durch-css-sprites/"><i>Kürzere Ladezeiten durch CSS-Sprites.</i></a> In: <i>webkrauts.de.</i> 15. Dezember 2009,<span class="Abrufdatum"> abgerufen am 15. September 2011</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACSS-Sprites&rft.title=K%C3%BCrzere+Ladezeiten+durch+CSS-Sprites&rft.description=K%C3%BCrzere+Ladezeiten+durch+CSS-Sprites&rft.identifier=http%3A%2F%2Fwww.webkrauts.de%2F2009%2F12%2F15%2Fkuerzere-ladezeiten-durch-css-sprites%2F&rft.creator=Tobias+Otte&rft.date=2009-12-15&rft.language=de"> </span></span>

</li>

<li id="cite_note-oms-4"><span class="mw-cite-backlink"><a href="#cite_ref-oms_4-0">↑</a></span> <span class="reference-text"><span class="cite">Christian Grzeschik: <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110309051019/http://blog.online-marketing-solutions.com/google-page-speed-%E2%80%93-css-sprites-vs-image-maps-teil-2/"><i>Google Page Speed – CSS Sprites vs. Image-Maps (Teil 2).</i></a> In: <i>blog.online-marketing-solutions.com.</i> 4. März 2011, archiviert vom <style data-mw-deduplicate="TemplateStyles:r250917974">

/* start https://de.wikipedia.org/ */

.mw-parser-output .dewiki-iconexternal>a{background-position:center right!important;background-repeat:no-repeat!important}body.skin-minerva .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/OOjs_UI_icon_external-link-ltr-progressive.svg")!important;background-size:10px!important;padding-right:13px!important}body.skin-timeless .mw-parser-output .dewiki-iconexternal>a,body.skin-monobook .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/MediaWiki_external_link_icon.svg")!important;padding-right:13px!important}body.skin-vector .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/Link.ernal-small-ltr-progressive.svg")!important;background-size:0.857em!important;padding-right:1em!important}

/* end https://de.wikipedia.org/ */

</style><span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fblog.online-marketing-solutions.com%2Fgoogle-page-speed-%25E2%2580%2593-css-sprites-vs-image-maps-teil-2%2F">Original</a></span> am <span style="white-space:nowrap;">9. März 2011</span><span>;</span><span class="Abrufdatum"> abgerufen am 15. September 2011</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACSS-Sprites&rft.title=Google+Page+Speed+%E2%80%93+CSS+Sprites+vs.+Image-Maps+%28Teil+2%29&rft.description=Google+Page+Speed+%E2%80%93+CSS+Sprites+vs.+Image-Maps+%28Teil+2%29&rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20110309051019%2Fhttp%3A%2F%2Fblog.online-marketing-solutions.com%2Fgoogle-page-speed-%25E2%2580%2593-css-sprites-vs-image-maps-teil-2%2F&rft.creator=Christian+Grzeschik&rft.date=2011-03-04&rft.source=http://blog.online-marketing-solutions.com/google-page-speed-%E2%80%93-css-sprites-vs-image-maps-teil-2/&rft.language=de"> </span></span>

</li>

<li id="cite_note-medium-5"><span class="mw-cite-backlink"><a href="#cite_ref-medium_5-0">↑</a></span> <span class="reference-text"><span class="cite">Uday Hiwarale: <a rel="nofollow" class="external text" href="https://medium.com/jspoint/creating-css-animations-using-sprite-sheet-47e2b7a3793c"><i>Creating CSS animations using a sprite sheet.</i></a> In: <i>medium.com.</i> 1. September 2016,<span class="Abrufdatum"> abgerufen am 30. Oktober 2022</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACSS-Sprites&rft.title=Creating+CSS+animations+using+a+sprite+sheet&rft.description=Creating+CSS+animations+using+a+sprite+sheet&rft.identifier=https%3A%2F%2Fmedium.com%2Fjspoint%2Fcreating-css-animations-using-sprite-sheet-47e2b7a3793c&rft.creator=Uday+Hiwarale&rft.date=2016-09-01&rft.language=en"> </span></span>

</li>

<li id="cite_note-csstricks-6"><span class="mw-cite-backlink"><a href="#cite_ref-csstricks_6-0">↑</a></span> <span class="reference-text"><span class="cite">Chris Coyier, Volkan Görgülü: <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110923144943/http://css-tricks.com/158-css-sprites/"><i>CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.</i></a> In: <i>css-tricks.com.</i> 2007, archiviert vom <span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fcss-tricks.com%2F158-css-sprites%2F">Original</a></span> am <span style="white-space:nowrap;">23. September 2011</span><span>;</span><span class="Abrufdatum"> abgerufen am 15. September 2011</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACSS-Sprites&rft.title=CSS+Sprites%3A+What+They+Are%2C+Why+They%E2%80%99re+Cool%2C+and+How+To+Use+Them&rft.description=CSS+Sprites%3A+What+They+Are%2C+Why+They%E2%80%99re+Cool%2C+and+How+To+Use+Them&rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20110923144943%2Fhttp%3A%2F%2Fcss-tricks.com%2F158-css-sprites%2F&rft.creator=Chris+Coyier%2C+Volkan+G%C3%B6rg%C3%BCl%C3%BC&rft.date=2007&rft.source=http://css-tricks.com/158-css-sprites/&rft.language=en"> </span></span>

</li>

</ol></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-12-24" href="https://de.wikipedia.org/wiki/?title=CSS-Sprites&oldid=262707647">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>